<template>
  <mars-dialog :draggable="true" title="军标标绘" :width="380" :height="500" :position="{ top: 60, left: 10 }">
    <treeSelect
      class="equipment-select"
      :multiple="false"
      :options="treeData"
      placeholder="选择类别"
      :normalizer="normalizer"
      :disable-branch-nodes="true"
      no-results-text="没有匹配到内容..."
      @select="treeSelectChange"
    />

    <div class="equipment-list">
      <div
        v-for="(item, index) in equipmentList"
        :key="index"
        :class="['equipment-item', curIdx === index ? 'equipment-current' : '']"
        :title="item.name"
        @click="equipmentClick(item, index)"
        @mousedown="equipmentClick(item, index)"
      >
        <img :src="item.imgUrl" style="width: 50px; height: 50px" />
        <div class="fs12">{{ item.symbolName }}</div>
      </div>
    </div>
  </mars-dialog>
</template>

<script setup>
/**
 * 模型拖拽管理模块
 */
// import { TreeSelect } from "ant-design-vue"
import { useStore } from "vuex"
import TreeSelect from "vue3-treeselect"
import "vue3-treeselect/dist/vue3-treeselect.css"
import { ref, markRaw, onMounted, computed, watch, toRaw, toValue, onBeforeMount, inject, onUnmounted } from "vue"
import useLifecycle from "@/common/uses/use-lifecycle"
import * as mapWork from "./map"
import { useWidget } from "@/common/store/widget"

const SHOW_CHILD = TreeSelect.SHOW_CHILD
const store = useStore()
const { activate, disable, isActivate, updateWidget } = useWidget()

const treeData = ref([])
const equipmentList = ref([])
const curIdx = ref(-1)
const value = ref("0-0-0")
const curEquip = ref()
let equipPlotLayer
// 启用map.ts生命周期
useLifecycle(mapWork)

onBeforeMount(() => {
  console.log("onBeforeMount--")
})

onMounted(() => {
  equipPlotLayer = window?.$equipPlotLayer
  initTree()
})

const dropEvent = computed(() => store.state.event.dropEvent)

watch(
  () => dropEvent.value,
  () => {
    // 拖拽部署装备信息
    mapWork.deployEquipModel(toRaw(toValue(curEquip)), toRaw(toValue(dropEvent)), equipPlotLayer)
  }
)

const treeSelectChange = (node) => {
  getModels(node)
  setTimeout(() => {
    const dom = document.getElementsByClassName("vue-treeselect__x-container")[0]
    if (dom && dom.title) {
      dom.title = ""
    }
  }, 100)
}

const equipmentClick = (item, index) => {
  curIdx.value = index
  curEquip.value = item
}

const getModels = (node) => {
  console.log("getModels--", node)
  mapWork.getModelList(node.text, node.imgurl).then((res) => {
    console.log("jbs---", res)
    equipmentList.value = res
  })
}

const normalizer = (node) => {
  return {
    label: node.text,
    id: node.text
  }
}

const initTree = async () => {
  const d = await mapWork.getModelCategoryTree()
  treeData.value = d.data
}
</script>
<style lang="less" scoped>
.equipment-select :deep .vue-treeselect__menu {
  background: linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat,
    linear-gradient(to bottom, var(--mars-base-color), var(--mars-base-color)) left bottom no-repeat,
    linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat,
    linear-gradient(to left, var(--mars-base-color), var(--mars-base-color)) right bottom no-repeat;
  background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
  background-color: var(--mars-bg-base);
  border: 1px solid #008aff70;
  box-shadow: 0px 4px 15px 1px rgba(2, 33, 59, 0.7);
  border-radius: 0px;

  .vue-treeselect__option--selected {
    background: transparent;
    color: var(--mars-base-color);
    font-weight: bold;
  }

  .vue-treeselect__option--selected:hover {
    background: transparent;
  }

  .vue-treeselect__option {
    font-weight: 100;
    font-size: 14px;
    font-family: "Microsoft YaHei";
  }

  .vue-treeselect__option:hover,
  .vue-treeselect__option--highlight {
    background: #5174a8;
  }
}

.equipment-list {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  min-height: 100px;
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;

  .equipment-item {
    margin-top: 15px;
    width: 25%;
    text-align: center;
    padding: 4px;
  }

  .el-collapse-item__header {
    padding-left: 10px;
  }
}

.equipment-current {
  background: rgba(64, 158, 255, 0.3);
}

.fs12 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  font-size: 12px;
}
</style>
